<script setup lang="ts">
import BarChart from "./modules/bar-chart.vue";
import BarChartTwo from "./modules/bar-chart-two.vue";
import BubbleChart from "./modules/bubble-chart.vue";

</script>

<template>
  <div>
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">col-6</div>
      </a-col>
      <a-col class="gutter-row" :span="8">
        <div class="gutter-box">col-6</div>
      </a-col>
    </a-row>
    <a-row :gutter="16">
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box">
          <div>集团风险情况</div>
          <BarChart></BarChart>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box">
          <div>风险排名</div>
          <BarChartTwo></BarChartTwo>
        </div>
      </a-col>
    </a-row>
    <a-row :r="16" class="mt-10px">
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box">
          <div>经费情况</div>
          <BarChart></BarChart>
        </div>
      </a-col>
      <a-col class="gutter-row" :span="12">
        <div class="gutter-box">
          <div>影响因素占比</div>
          <BubbleChart></BubbleChart>
        </div>
      </a-col>

    </a-row>
  </div>
</template>

<style scoped>
.gutter-box {
  background: #0092ff;
  padding: 8px 0;
}
</style>
